طرح وب به قالب نمايشي و طراحي گرافيکي صفحات موجود در وب سايت مي گويند که معرف محتوا و مطالب آن وب سـايت مي باشد. در واقع يک وب سايت مجموعه اي از اطلاعات درباره موضوع و يا عنوان خاص است. طراحي يک وب سايت مشخص کننده آرايش و ساختــار صفحات وبي است که بوجود آورنده وب سايت خواهند بود. يک صفحه وب شامـــل اطلاعاتي درمورد هدف ايجــاد وب سايت ميباشد. يک وب ســايت را همــانند کتابي تصور کنيد کـه هر صفحه وب در حکم برگي از کتاب خواهد بود.در زمينه طراحي وب سايت جنبه هاي گوناگوني بايد در نظر گرفته شود که به سبب پيشرفت روز افزون اينترنت همواره براين موارد افزوده مي شود. طرح وب جلوه بصـري هدف وب سايت است و اولين بخش از يک صفحه وب است که ذهن مخاطب را با خود درگير مي کند.

طراح وب با در نظر گرفتن هدف سايت و مخاطبان آن و با استفـاده از المان هاي متناسب با رويکرد سـايت و به کمک ذهن خلاق و ذوق هنري  طراحی خود در بکار بردن ابعاد و رنگها، طرحي خلق مي کند که ضمن ايجـاد يکپارچگي در کليه صفحات وب سايت، نماي تکرار شونده و خسته کننده را به مخاطب القا نکند. در وب سايت بايد از الگوي ثابتي در صفحات استفاده کرد که کاربر به هنگام ديدن صفحات متوجه اين باشد که همه صفحات در يک سايت مشخص هستند.

 

 

براي وب سايت هاي تجاري عمومي، موارد زير از جمله اصلي ترين آنها به شمار مي روند: 

1.طراحي سايت بر طبق عنوان و محتواي مطالب مي باشد. 

2.مطالب، جوهر کلام و اطلاعات درون سايت بايد مطابق با هدف سايت بوده و طيفي از عموم را نشانه رود که به دنبال اطلاعات ارائه شده در سايت هستند. 

3.سايت بـــايد قابل فهم بوده و برقـــراري ارتبــاط با آن حتي براي مخاطباني کـه آشنايي چنداني بـا وب ندارند، آســـان باشد. چنانچه سايت به اندازه کافي بزرگ بوده و اطلاعات زيادي را شامــل شود، بـايد اطلاعات راهنما را به گونه اي بکار برد که به سرعت در اختيار بيننده قرار گيرند. 

4.نماي کــار بايد کلي بوده و تمام صفحه را دربر گيرد تا بتواند پايـداري و ثبات را القــا کند. سبک نگارش بايد زيبا و تخصصي بوده و مناسب با سليقه مخاطبان و محتواي سايت باشد. 

5.در نگارش متون و اطلاعاتي که مخاطب به دنبال آنها است بايد بزرگ نمايي شود تا به بيننده القا کند که اين همان چيزي است که به دنبال آن بوده است. 

6.همچنين سايت بايد به سادگي در اينترنت يافت شود و درصورت امکان در بالاي ليست هاي جستجو قرار گيرد، اگرچه همواره اينگونه نباشد لااقل در موتورهاي جستجوي اصلي چنين شود. 

يک وب سايت معمولا شامـل متن و تصـاويـر است. اولين صفحه يک وب سـايت صفحه خانه (Home Page) و يا صفحه ايندکس (index) ناميده مي شود. بعضي از وب سايت هـــا از صفحه اي استفـــاده ميکنند کـــه معمولا صفحه خوش آمد ناميده مي شود. اين صفحه ممکن است شــامــل مواردي چون پيغــــــــــام خوش آمـدگويي، انتخاب زبـــان، انتخاب ناحيه جغرافيايي و يـا اعلام عدم پذيرش مسوليت درمــوارد خاص باشد. هر صفحه وب درون سايت وب، يک فايل HTML است که URL مخصوص به خود را دارد.

بعد از اين که هر صفحه وب ساخته شد، اين صفحات با استفاده از فهرست راهنمايي که از پيوندهاي مختلف تشکيل شده است به يکديگر متصل مي شوند.

هنگامي که يک وب ســايت کامل شد براي آنکه بـراي همه برروي اينترنت قابل مشاهده باشد بايد منتشر و يا ارسال (Upload) شود. اين کار به کمک يک ميزبان FTP انجام ميشود. هنگامي که سايت منتشر شد، مدير سايت براي افزايش بازديدکنندگان، از تکنيکهاي گونــاگون استفاده مي کند. اين کار با ثبت کردن وب سـايت در موتورهاي جستجويي نظير Google و Yahoo، تبادل لينک با وب ســايت هاي ديگر، ايجاد پيوند با وب سايتهاي مشابه و غيره امکان پذير است.

 

 

تاثير سايت در اطلاع رساني:

داشتن يک سايت مانند داشتن يک کاتالوگ است اما با مزاياي بيشتر. يک کاتالوگ مي تواند شامل تصاوير و متون باشد اما در يک سايت مي توان از تصاوير، متون، فيلم و صوت و يا انيميشن نيز استفاده کرد. بنابر اين امکان اطلاع رساني جامع با محتوايي جذاب تر را مي دهد. همچنين هزينه يک سايت به مراتب کمتر و مقرون به صرفه تر از يک کاتالوگ است. زيرا براي طراحي، چاپ و انتشار هر نسخه از کاتالوگ نياز به هزينه است اما براي يک سايت فقط کافيست هزينه ي طراحي و نگهداري آن پرداخت شود و بعد از آن در طول سايت هزاران و يا ميليونها کاربر مي توانند بارها و بارها از آن بازديد کنند.

 

تاثير سايت در بازاريابي:

موتورهاي جستجو بدون هزينه براي شرکت و کار شما بازاريابي مي کنند بدين ترتيب که بتوانند سايت شما را پيدا کنند سپس کابري که به دنبال هر يک از خدمات و يا محصولات و يا اطلاعات ارائه شده در سايت شما باشد، اين موتورها کاربر را به سايت شما هدايت مي کنند. 

 

ايجاد قابليتهاي جديد تبليغاتي:

شما با داشتن يک سايت به راحتي مي توانيد وارد عرصه تجارت الکترونيک شويد و امکان استفاده از قابليت هاي تجارت الکترونيک برايتان به وجود مي آيد. از مهمترين اين قابليتها مي توان به تبليغات اينترنتي، تبليغات در موتورهاي جستجوگر، تبليغات کليکي و تبادل بنر و لينک اشاره کرد.

 

در دسترس بودن:

سايت همواره در تمامي ساعات شبانه روز و حتي روزهاي تعطيل نيز فعال و در دسترس کاربران و مشتريان است.

 

فعاليت گسترده تر حتي در خارج از مرزهاي کشور خودتان:

اگر شما سايتي داشته باشيد مي توانيد امکان فعاليت خود را در خارج از مرزهاي کشور محل سکونتتان به راحتي ايجاد نماييد و کاربران خارج از مرزهاي کشورتان نيز مي توانند به صورت شبانه روزي با شما و خدمات و محصولاتتان آشنا شوند و در صورت نياز از خدمات و محصولات شما استفاده نمايند.

 

درآمد زايي:

ميزان سودآوري و درآمد زايي سايتها به نوع سايت و اهداف آن بستگي دارد البته ميزان فعاليت صاحبان سايتها و بروز رساني و رسيدگي به آنها نيز عامل بسيار مهمي است. اما امروزه شرکتها و افراد بسياري هستند که فقط از طريق سايت فعاليت مي کنند و عمده درآمد آنها از طريق سايت و مشتريان آنلاين است.

 

ايجاد تغيير و تحول در طراحي وب سايت کليد موفقيت آنلاين

 

بسياري از افراد کسب و کار آنلاين خود را شروع کرده در حالي که هر روز رقابت در هر نوع بازاري شديدتروبيشتر مي شود. به همين دليل در حال حاضر داشتن وب سايتي با طراحي مناسب، بخش مهمي از موفقيت هر سازمان آنلايني ميباشد. به خاطر داشته باشيد وب سايت شما به واقع "ويترين فروشگاه" شماست. درست مانند هر فروشگاه خوبي، بهترين ويترين بيشترين مشتري را جذب مي کند.

بسياري از افراد مرتکب يک اشتباه مي شوند و آن صرفه جويي در هزينهء طراحي وب سايتشان مي باشد.مشکل اينجاست که تعدادي از شرکت هاي تجاري آنلاين، طراحي ارزان و يا حتي رايگان پيشنهاد مي کنند. اما حقيقت امراين است که اين طراحي هاي کم و يا بدون هزينه بسيار ابتدايي ميباشند. اغلب آنها قالب هاي ساده اي هستند که حتي خود شما ميتوانيد رنگها، سبک طراحي و يا فونت آن را که بسيار محدود هستند به سليقه خود انتخاب کنيد.

اما اگرمصمم به راه اندازي و اجراي يک وب سايت موفق هستيد و جاه طلبانه به مقدار زيادي ترافيک روي وب سايت خود فکر مي کنيد، در واقع به يک طراحي وب که قادر به اجراي اين جريان مي باشد نياز داريد.

پيدا کردن يک شرکت طراحي وب سايت کار دشواري نيست. شما با صرف هزينه هاي کوچک بر روي موفقيت آنلاين و آيندهء خود سرمايه گذاري مي کنيد. براي اين کار بايد ابزار مناسب آن را در دست داشته باشيد.در واقع طراحي وب سايت با کيفيت بالا اساس موفقيت کار شماست.

يک شرکت طراحي وب سايت خوب، دو چيز اساسي به شما ارائه ميدهد: اولين موردي که به نظر مي رسد رضايت از زيبايي طراحي مي باشد. و مورد دوم شامل تکنولوژي تغييرو تحول در طراحي و قرار گرفتن هنربرنامه نويسي در آن مي باشد. اجازه دهيد در مورد اين دو عنصر کمي بيشتر و بازتر صحبت کنيم.

طراحي وب سايت شما نياز به زيبايي دارد زيرا براي جلب توجه بازديدکنندگان اين مورد براي شما يک شانس تلقي مي شود. هنگامي که براي اولين بار ترافيک به سمت صفحهء مورد نظر در وب سايت شما مي آيد، اين مسئله بسيار مهم و حياتي است که توجه آني و علاقهء بازديدکنندگان را کسب کنيد.شما نياز به يک وب سايت بصري خيره کننده اي داريد که نه تنها توجه بازديدکنندگان را جلب کرده بلکه منجر به هدايت آنها به وب سايت شما و درنهايت فروش قطعي مي شود.همچنين اين وب سايت بصري خيره کننده بايد در طراحي از تکنولوژي تغيير و تحول در طراحي نيز استفاده کند. براي مثال ميتوان از توانايي پخش ويدئوها که تبليغات بسيار خوب و بزرگي براي بازاريابي محصوب مي شود نام برد. همچنين در طراحي سايت بايد از هنر برنامه نويسي در لينکها و ساختار آن وب سايت استفاده شود زيرا اين نوع لينکها قادرند ازموتورهاي جستجو به تمامي سايتهاي ديگر متصل شوند.

نمايه سازي براي موتورهاي جستجو بسيار مهم است زيرا ميتواند وب سايت شما را در رتبه بندي جستجوي صفحات ارتقا دهد. يک شرکت طراحي وب سايت خوب، در مطالب سايت نيز به شما کمک مي کند تا مطمئن شويد تمامي مطالب جالب، مرتبط و آموزنده است.چرا که اين موضوع در افزايش آمار رتبه بندي موتورهاي جستجو به شما کمک زيادي مي کند.اين عوامل به سهولت جستجوي مشتريان کمک ميکند تا راحت تر به انواع محصولات و خدمات ارائه شده وب سايت شما دست يابند. و بالاخره يک شرکت طراحي وب سايت خوب، سايت شما را به گونه اي طراحي مي کند که از conversion rate بالاي آن مطمئن باشيد. اين بدان معني است که ايجاد بار ترافيک جديد بر روي سايت و ايجاد شانسهاي بهتر از معمول براي جذب بازديدکنندگان و تبديل آنها به مشتريان دست به نقد به کمي زمان نيازمند است.

بهترين شرکت طراح وب سايت فقط براي مدت زمان کوتاه مورد نياز شما نسيتند.آنها فقط براي طراحي وب مورد استفاده شما قرار نميگيرند بلکه بعد از آن به شما بستگي دارد که از خصوصيات سودمند آن شرکت براي بهتر شدن و پيشرفت خود استفاده کنيد. يک شرکت طراحي وب سايت خوب ميتواند شريک دائمي براي شما بوده و هنگامي که سايت شما نياز به تغييري کوچک در  طراحی   جهتي خاص دارد، هميشه در کنار شما باشد. قرار دادن فرم جديدي ازتکنولوژي که باعث تاثيرگذاري بيشتر طراحي وب سايت شما مي شود نيز از جمله کارهاي اين شرکت مي باشد. 

احتمالاً هنگامي که شروع به جستجو کنيد، با چند عبارت مختلف و کوچک به کليد واژه اي با سطح ترافيک بالا و کم رقابت دست پيدا خواهيد کرد. اين دقيقاً چيزي است که دنبالش بوديد! اگر هدف شما ايجاد کسب و کار در يک منطقه کوچک و دور افتاده مي باشد، جستجوي کليد واژه هايي با حجم کم جستجو را ناديده نگيريد. اگر چنين کلماتي هستند که با وب سايت شما مرتبط مي باشند، قادر خواهيد بود ترافيک بسيار بالاتر و با کيفيت بسيار عالي بدست آوريد.

 

هفت موردي که مشتريان در يک وب سايت طراحي شده به دنبال آن هستند:

 

 

اگر کسب و کار شما آنلاين مي باشد، اگر وب سايت خود را به عنوان يک پايگاه براي ارائه محصولات خود و خوانندگان آن را مشتري تلقي مي کنيد، بايد بگويم که نمي توانيد هميشه فکر کنيد که افراد وقت و پول خود را صرف وب سايت شما مي کنند. بنابراين تغيرات و تنظيمات دوره اي براي سايت شما بسيار ضروري است. با اين عمل در خواهيد يافت که نياز مشتريان از طريق سايت شما واقعاً برآورده مي شود ويا فقط براي آنها دسترسي به يک رسانه اجتماعي و يا وبلاگ نويسي ايجاد کرده ايد!

افراد سليقه هاي متفاوتي دارند اما هنگامي که به اينترنت متصل مي شوند همگي به دنبال چند مورد هستند که کدام وب سايت را براي انتخاب نيازهاي خود دنبال کنند، به چه وب سايتي اعتماد کرده و از کدام سايت پشتيباني کنند. ليست زير به 7 مورد ضروري که هر وب سايت بايد دارا باشد اشاره مي کند:

 

سهولت استفاده

وب سايت شما نبايد گيج کننده بوده و يا حرکت در آن سخت باشد. مشتريان وب سايت معمولا به دنبال مواردي ساده هستند: محصولات شما، اطلاعاتي در مورد شما، وبلاگ شما و شماره هاي تماس و... . تمامي اين موارد بايد کاملاً مشخص بوده و پيدا کردن آنها ساده باشد. هرگونه اطلاعات ديگر و يا لينکهاي ديگري که براي افراد قرار داده ايد نيز بايد اينگونه باشد. فونت آن براي خواندن آسان و لينک آن داراي کلمات کليدي قوي براي جستجو باشد.

 

وضوح محتوا

مطالب از شماره هاي تلفن گرفته تا فعاليتهاي شما بايد به آساني قابل درک باشد.تمامي اين موارد بايد براي تک تک صفحه هاي وب سايت شما رعايت شود. اگر خوانندگان مطالب را درک نکنند ديگر سراغ شما و مطالبتان نخواهند آمد.

 

اعتبار

اولا وب سايت شما قطعاً بايد داراي يک صفحه اختصاصي به عنوان " تماس" و يک فرم اختصاصي " تماس با ما " را دارا باشد. مانند آدرس ايميل، آدرس محل استقرار شرکت و شماره تلفنها .(از قرار دادن ايميل هاي عمومي از قبيل ياهو و گوگل پرهيز کنيد) 

اعتبار يک وب سايت فقط شامل مطالب طراحی يا نظرات و ايده هاي آن نمي باشد. بلکه به بازديدکنندگان و افرادي که جزء پيروان تويتر و يا از طرفداران فيس بوک هستند نيز بستگي دارد. همچنين جوايز و گواهينامه هاي دريافت شده آن وب سايت به اعتبار آن کمک مي کند. خوانندگاني که سرعت بيشتري در خواندن مطالب دارند، زودتر قادر به کشف اين موضوع نسبت به ديگران مي باشند که کسب و کار پر رونق شما را شناسايي کنند. آنها نسبت به ديگران زودتر قادر به تصميم گيري و اعتماد به شما هستند.

 

منحصر به فرد بودن طراحي

اين موضوع بستگي به طراحي وب سايت، محصولات و مطالب شما دارد.اگر سايت شما جالب به نظر نرسد، افراد وقت خود را براي جستجو در آن تلف نمي کنند.اگر شما در بازار کسب و کار شبيهه ديگران هستيد، چرا خوانندگان به مطالب شما توجه کنند؟!

 

مشارکت و توانايي دادن بازخورد

اگر مشتريان نتوانند به آساني به شما دسترسي پيدا کنند، آنها شما را رها خواهند کرد. همچنين اگر با شما تماس گرفته و سريع پاسخي دريافت نکنند، شما را ترک کرده و به فراموشي مي سپارند. آنها قادرند به اعتبار شما نيزلطمه وارد کنند. لذا براي مشتريان خود راههاي ساده براي برقراري ارتباط با سايت خود در نظر گرفته و تا جاي امکان راه حل هايي که براي شما قابل انجام مي باشد ارائه کنيد؛ از جمله ارائه شماره تلفن و آدرس، ارائه شبکه هاي اجتماعي، فرم تماس، وبلاگ نويسي و ديگر راههاي معمول. هنگامي که افراد دريافتند شما هميشه در دسترس هستيد، به شما اعتماد کرده و وفادار خواهند بود.

 

خصوصي سازي 

به خاطر داشته باشيد تک تک افرادي که با شما در ارتباط هستند منحصر به فرد بوده و به نوع خود از محصولات و خدمات شما انتظارات و توقعات خاص خود را دارند.

هيچ کس دوست ندارد با يک ايميل تحت عنوان " مشتري گرامي " مرجوع شود وبدون شک هر شخصي از دريافت پيشنهاد و محصولاتي که علاقه ويژه اي به آن دارد نيز خوشحال خواهد شد. پس بايد مشتريان خود را شناخته و اطلاعات شخصي که آنها براي شما به اشتراک گذاشته اند را ذخيره کرده و از آنها براي بهبود و پايداري روابط شخصي و کاري استفاده نماييد.

 

امنيت

خوانندگان و مشتريان بايد مطمئن باشند که هيچ يک از اطلاعات شخصي آنها مورد سوءاستفاده قرار نگرفته و يا به شخص ديگري فروخته نميشود و تمامي آن محرمانه خواهد بود.اگر کار شما فروش محصولات مي باشد و اين به معناي نياز شما به SSL " امنيتي " مي باشد. همچنين اگر براي بازاريابي کالا از افراد درخواست ايميل آدرس ميکنيد، بدين معني است که براي حريم شخصي خوانندگان احترام قائل هستيد.

اگر با افراد در سايتهاي رسانه اجتماعي در تماس هستيد در واقع اختيار بخشي از فعل و انفعالات شخصي خود و ديگران را در دست گرفته ايد.

 

اکثر کاربران فکر مي کنند که وب همان اينترنت است اما اينترنت در سال ???? وقتي که آرپانت که همان پدر اينترنت ناميده مي شود شروع به استفاده از پروتکل TCP/IP کرد شکل گرفت. وب توسط تيم برنرز لي انگليسي در سال ???? ساخته شده. شبکه جهاني وب از سرورها که صفحات را دربر دارند و مرورگرهاي بسياري همانند فايرفاکس ، اينترنت اکسپلورر ، سافاري و… ساخته شده است. درواقع اينترنت مجموعه اي از فناوري ست که موجوديت وب را رقم زده است. اگر اينترنت نبود وب هم نبود و اگر وب نبود اينترنت همچنان در اثر هجر باقي مي ماند. بايد به اين نکته توجه داشت که بسياري از برنامه هاي تحت شبکه بدون نياز به وب کار مي کنند مانند ايميل، FTP ، IRC يا چت مبتني بر اينترنت ، نرم افزارهاي پيام رسان ، تل نت، تورنت...

اينترنت يک دا?ن تو در تو است از تلفن‏ها، خطوط کابلى، ماهواره‏ها، سيم‏هاى شبکه و کامپيوترهاى به هم پيوسته که در سرتاسر جهان پراکنده شده‏اند. توصيه مي کنم مقاله اينترنت چيست را در همين سايت ايران کالا مطالعه کنيد. وب به نامى گفته مي شود که به هر چيز در اينترنت تعلق گرفته است. ما ميتوانيم با استفاده از Uniform Resource Locator يا URL به آن چيز دسترسى داشته باشيم. اين روش آدرس‏دهى (مثل http://www.irankala.org) در دهه 60 اينترنت را تبديل به شاهراه اطلاعاتى کرد. به خصوص اينكه باعث حذف اعلان‏ها و فرمان‏هايى شد که سابقاً کاربران مجبور بودند تا براى رسيدن به اطلاعات تايپ کنند. بخش اعظمى از محتوياتى که شما از طريق URL به دست مي آوريد، فايلهايى هستند که با يک کد خاص موسوم به HyperText Makup Language يا به اختصار HTML نوشته شده‏اند. ما فايلهاى HTML را به عنوان صفحات وب ميشناسيم.

حالتـهاى زيادى پيش مـي آيد که به جـاى وب از اينترنت استفاده مي کنيم : مثل وقتى که يک e-mail ميفرستيم؛ يک MP3 را به وسيله يک برنامه انتقال مستقيم (peer-to-peer) دريافت مي کنيم؛ يا يک پيام فورى را توسط برنامه‏اى مانند ICQ ارسال مي کنيم. و نيز برخى از آدرسهاى وب که با ".www" شروع نميشوند.

به خاطر هوشمندى كه در مرورگرها و اغلب وب سرورها قرار داده شده است، معمو?ً نيازى به وارد کردن ".www" قبل از يک آدرس وب وجود ندارد. وقتى يک URL را وارد ميکنيد، مرورگر يک درخواست به يک سرور براى پيداکردن سايت ميفرستد. سرور اغلب سايت را حتى بدون پيشوند (به عنوان مثال irankala.org ) تشخيص مي دهد. اما اگر نتوانست، خود مرورگر پيشوند را اضافه مي کند و دوباره آن را ارائه مي کند؛ يا به اميد پيدا کردن يک مورد منطبق، آن را از سرورهاى بزرگتر و بزرگتر طلب (ping) مي کند. حتى اگر شما www را وارد نکرده باشيد هنگام برقرارى ارتباط در مرورگر شما نمايش داده مي شود. اما بايد کمى هم مراقب باشيد، به هر حال بعضى از سرورها کمى غير عادى هستند و توانايي تصحيح URL ها را ندارند؛ بنابراين اگر www را ننوشته باشيد ممکن است سايتتان را پيدا نکنيد. طراحی وب سایت 

يان ياکوبس از کنسرسيوم وب جهان گستر واقع در MIT مى گويد « در جهان ايده آل، URL ها نه ديده مي شوند و نه شنيده ». در حال حاضر کاربران، سايتها را به وسيله موتورهاى جستجويى چون Google پيدا مي کنند و براى رسيدن به هر چيزى روى لينک‏ها کليک مي کنند. کنسرسيوم در جستجوى راهبردهاى جهانى براى تغيير معمارى وب است تا گردش در آن را آسان تر کند؛ به خصوص براى افرادى که دچار نوعى معلوليت جسمى نيز هستند .

 

 

تفاوت اينترنت و وب

 

 

اين سوال معمولا وجود دارد که چه تفاوتي ميان اينترنت و وب جهان گستر وجود دارد؟ و چه مواقعي بايد قبل از URL از WWW استقاده کنيم؟ 

بسياري از کاربران، مفاهيم اينترنت و وب جهان گستر (World Wide Web) را يکسان يا به جاي هم به کار مي برند. در واقع از جهتي حق با آنهاست، زيرا Web آنچنان رشد کرده و همه چيز را در اينترنت به زير سيطره خود برده که در اکثر مواقع، اينترنت مساوي وب و وب مساوي اينترنت است. ما در اينجا توضيح مي دهيم که چرا اين تصور، از جهاتي اشتباه است.

اينترنت يک معناي عام و بسيار وسيع، و شامل يک دالان تو در تو است از صفحات وب، خطوط تلفن، خطوط کابلي،ماهواره ها، سيم هاي شبکه و کامپيوترهاي به هم پيوسته که در سرتاسر جهان پراکنده شده اند.

وب نيز بخشي از امکانات اينترنت است و به صفحات و پايگاه هايي اطلاق مي شود که از طريق آدرس هاي ويژه، امکان استفاده و مرور آنها توسط انواع مرورگرها مهيا مي باشد. ما مي توانيم با استفاده Uniform Resource Locator يا URL به اين پايگاه ها دسترسي داشته باشيم. اين روش آدرس دهي (مثل www.popsci.com) در دهه گذشته اينترنت را تبديل به شاهراه اطلاعاتي کرد. به خصوص اينکه باعث حذف اعلان ها و فرمان هايي شد که سابقا کاربران مجبور بودند تا براي رسيدن به اطلاعات متني، تايپ کنند. آن هم اطلاعاتي که صرفا متن بوده و از جهاتي کسل کننده بودند، اما وب آنها را تبديل به محيطي جذاب، بصري و فوق العاده پويا و متحرک نمود.

ضمن اينکه بخش عظيمي از محتوياتي که شما از طريق URL بدست مي آوريد، فايل هايي هستند که با يک کد خاص موسوم به Hyper Text Markup Language يا به اختصار HTML نوشته شده اند. در حقيقت ما فايل هاي HTML را به عنوان صفحات وب مي شناسيم.

البته حالت هاي زيادي پيش مي آيد که به جاي وب، از اينترنت استفاده مي کنيم:

مثل وقتي که يک Email مي فرستيم؛ يک فايل موسيقي Mp3 را بوسيله يک برنامه انتقال مستقيم (Peer to Peer) (مشابه Limewire) دريافت مي کنيم و نيز برخي از آدرس هاي وب که با WWW شروع نمي شوند. بنابراين در يک کلام ، اينترنت مفهومي وسيع و کلي مي باشد و وب، مفهومي خاص و ويژه، اما از آنجايي که معمولا بيش از 90 درصد کارهاي ما در اينترنت از طريق پايگاه هاي وب انجام مي گيرد، به همين خاطر ، معمولا وب و اينترنت ، يکي فرض مي شوند.

 

 

تفاوت اينترنت و وب چيست؟

اکثر کاربران فکر مي کنند که وب همان اينترنت است اما اينترنت در سال ???? وقتي که آرپانت که همان پدر اينترنت ناميده مي شود شروع به استفاده از پروتکل TCP/IP کرد شکل گرفت. وب توسط تيم برنرزلي انگليسي در سال ???? ساخته شده. شبکه جهاني وب از سرورها که صفحات را دربر دارند و مرورگرهاي بسياري همانند فايرفاکس، اينترنت اکسپلورر، سافاري و… ساخته شده است. در واقع اينترنت مجموعه اي از فناوري است که موجوديت وب را رقم زده است. اگر اينترنت نبود وب هم نبود و اگر وب نبود اينترنت هم چنان در اثر هجر باقي مي ماند. بايد به اين نکته توجه داشت که بسياري از برنامه هاي تحت شبکه بدون نياز به وب کار مي کنند مانند ايميل،FTP ، IRC يا چت مبتني بر اينترنت، نرم افزارهاي پيام رسان، تل نت، تورنت... اينترنت يک دا?ن تو در تو است از تلفن ‏ها، خطوط کابلى، ماهواره ‏ها، سيم‏ هاى شبکه و کامپيوترهاى به هم پيوسته که در سرتاسر جهان پراکنده شده‏اند. وب به نامى گفته مي شود که به هر چيز در اينترنت تعلق گرفته است.

 

 

 

ما مي توانيم با استفاده از Uniform Resource Locator يا URL به آن چيز دسترسى داشته باشيم. اين روش آدرس‏ دهى در دهه 60 اينترنت را تبديل به شاهراه اطلاعاتى کرد. به خصوص اين كه باعث حذف اعلان ‏ها و فرمان ‏هايى شد که سابقاً کاربران مجبور بودند تا براى رسيدن به اطلاعات تايپ کنند. بخش اعظمى از محتوياتى که شما از طريق URL به دست مي آوريد، فايل هايى هستند که با يک کد خاص موسوم به HyperText Makup Language يا به اختصار HTML نوشته شده‏اند. ما فايل هاى HTML را به عنوان صفحات وب مي شناسيم. حالت هاى زيادى پيش مـي آيد که به جـاى وب از اينترنت استفاده مي کنيم: مثل وقتى که يک e-mail مي فرستيم؛ يک MP3 را به وسيله يک برنامه انتقال مستقيم(peer-to-peer) دريافت مي کنيم؛ يا يک پيام فورى را توسط برنامه‏اى مانند ICQ ارسال مي کنيم. و نيز برخى از آدرس هاى وب که با ".www" شروع نمي شوند. به خاطر هوشمندى كه در مرورگرها و اغلب وب سرورها قرار داده شده است، معمو? نيازى به وارد کردن".www" قبل از يک آدرس وب وجود ندارد. وقتى يک URL را وارد مي کنيد، مرورگر يک درخواست به يک سرور براى پيداکردن سايت ميفرستد.

 

سرور اغلب سايت را حتى بدون پيشوند(به عنوان مثال irankala.org) تشخيص مي دهد. اما اگر نتوانست، خود مرورگر پيشوند را اضافه مي کند و دوباره آن را ارائه مي کند؛ يا به اميد پيدا کردن يک مورد منطبق، آن را از سرورهاى بزرگتر و بزرگتر طلب(ping) مي کند. حتى اگر شما www را وارد نکرده باشيد هنگام برقرارى ارتباط در مرورگر شما نمايش داده مي شود.

 

 طراحی وب سایت 

 

اما بايد کمى هم مراقب باشيد، به هر حال بعضى از سرورها کمى غير عادى هستند و توانايي تصحيح URL ها را ندارند؛ بنابراين اگر www را ننوشته باشيد ممکن است سايت تان را پيدا نکنيد. يان ياکوبس از کنسرسيوم وب جهان گستر واقع در MIT مى گويد«در جهان ايده آل، URL ها نه ديده مي شوند و نه شنيده». در حال حاضر کاربران، سايت ها را به وسيله موتورهاى جستجويى چون Google پيدا مي کنند و براى رسيدن به هر چيزى روى لينک‏ ها کليک مي کنند. کنسرسيوم در جستجوى راهبردهاى جهانى براى تغيير معمارى وب است تا گردش در آن را آسان تر کند؛ به خصوص براى افرادى که دچار نوعى معلوليت جسمى نيز هستند.

 

 

 

 

کدام يک از کدهاي زير بر روي عناصر تاثير ميگذارند؟

 

وقتي به يک عنصر يکسري خصوصيات نسبت مي دهيم، و در يک استايل دهي گروهي يا در جاي ديگري يکسري خصوصيات ديگر براي آن مي نويسيم، از بين خصوصيات يکسان تمامي آنها به ارث برده ميشود و از بين ساير خصوصيات آن ويژگي هايي به ارث مي روند که نسبت به ساير دستورات ديرتر و يا به عبارتي بعد تر نوشته شده اند و در صفحه استايل دهي پايين تر قرار گرفته اند. با هم به بررسي مثال زير مي پردازيم :

  

 

{

color: blue;

 font-size: medium;

 font-weight: normal;

} 

h1, h2, h3 

{

 font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;

 background-color: navy;

color: white;

}

 

در دستورات ابتدايي رنگ نسبت داده شده به تگ h2 آبي است، اما در استايل دهي گروهي رنگ نسبت داده شده به آن سفيد است، به همين دليل رنگ فونت انتخابي براي آن سفيد خواهد بود. مهم نيست که در دستورات قبلي  100 بار رنگ آبي به h2 نسبت داده شود پرا که آخرين دستور  css رنگ سفيد را به اين تگ نسبت مي دهد. 

 

استايل دهي به لينک ها:

 

لينک ها در سراسر دنياي وب وجود دارند، اگر به لينک هاي اوليه با استايل پيش فرض نگاهي بيندازيم مي بينيم که لينک ها داراي يک خط در زير نوشته لينک (underline)  هستند. به صورت پيش فرض مرورگرها از رنگ هاي زير براي لينک ها استفاده مي کنند:

آبي :    لينکي که مشاهده نشده باشد.

بنفش :  لينکي که شما آن را قبلا مشاهده کرده ايد.

قرمز:   لينکي که فعال است و شما در حال کليک کردن بر روي آن هستيد.

در بيشتر مواقع استايل دهي به لينک ها ممکن است به شکل زير باشد:

 

A

 {

 font-weight: bold;

 color: black;

}

 

با اين دستور به جاي اينکه لينک هاي آبي رنگ با سايز فونت نرمال داشته باشيم، لينک هاي شما به رنگ آبي و ضخيم خواهد بود. 

 

 

 

همانطور که قبلا اشاره کرديم تا کنون يک نوع حالت براي لينک ها معرفي کرديم، لينک هاي مشاهده شده، لينک هاي فعال و لينک هايي که هنوز بر روي آنها کليک نشده است، اما نوع چهارمي وجود دارد که hover ناميده مي شود، اين حالت براي وقتي است که نشانه گر موس بر روي لينک مي آيد که با استايل دهي در css نيز ميتوان خصوصيات اين لينک را نيز تغيير داد.

در اينجا به برخي از استايل هايي که مي توان به لينک ها داد نگاهي مي اندازيم:

 

 

a {

 font-weight: bold;

 }

 a:link {

 color: black;

}

a:visited {

 color: gray;

}

a:hover {

 text-decoration: none;

 color: white;

 background-color: navy;

}

a:active {

 color: aqua;

 background-color: navy;

}

 

 

 

  عکس بالا کليه حالت هاي مختلف لينک ها را نشان مي دهد و حالت hover آن لينک تماس با ما  (contact us) است. تمامي رنگ هاي پيش زمينه و ساير رنگ هاي ديگر را مي توانيد با css  ايجاد کنيد و مي توانيد افکت هاي بسيار جذابي مانند آن چيزي که در بخش فوتر سايت وب اسکالا مشاهده نماييد ايجاد کنيد.

 

پاک کردن پيشينه مرورگر:

 

مرورگرها به صورت پيش فرض مقداري از پيشينه صفحات وب سايت را در خود ذخيره مي کنند و از اين اطلاعات استفاده مي کنند که بدانند آيا لينکي بازديد شده است يا نه، اما اين کار براي زمانيکه طراح وب سايت در حال تست کردن صفحه سايتي است کمي مشکل ساز مي شود به خصوص وقتي که طراح مي خواهد لينکي که بازديد نشده است را استايل بدهد، اما چون صفحه سايت را چندين بار refresh  کرده مرورگر وي به اصطلاح cache  کرده و به همين دليل لينک هاي بازديد نشده را بازديد شده مي پندارد که به همين دليل مي بايست cache يا اطلاعات ذخيده شده را پاک کرد. براي اين منظور به اين صورت عمل مي کنيم:

در مرورگر اينترنت اکسپلورر : تب  tools راانتخاب کرده، inteet option  را کليک مي کنيد، زير browser history دکمه delete  را بزنيد، در پنجره باز شده check box مربوط به history  را فعال کنيد، انتخاب ساير گرينه ها با توجه به نظر خودتان مي تواند صورت گيرد. در نهايت دکمه delete  را زده و پنجره inteet option را ok ميکنيم تا بسته شود و cache مرورگرمان پاک شود.

 

 

 

ساير مرورگرها نيز روشي مشابه دارند که آدرس دسترسي به history  آنها نيز به صورت زير است:

 

Tools > Options يا   Preferences > Privacy

 

 

کلاس هاي انتخابگر  :

 

تا اينجا ياد گرفتيم که چگونه در يک فايل CSS خصوصيات مختلفي براي تگها بنويسيم و آموختيم که ميتوان خصوصيات يک کلاس را براي تگهاي مختلفي اعمال کرد يعني ميتوان کلاس را چندين بار استفاده کرد. به عنوان مثال بياييد کلاس زير را دريک پاراگراف اعمال کنيم :

 

.fun {

color: #339999;

font-family: Georgia, Times, serif;

letter-spacing: 0.05em;

}

 

به اين ترتيب 3 خصوصيت براي پاراگرافمان تعريف کرده ايم،که خصوصيت سوم letter-spacing  به معناي اينست که فاصله بين کلمات موجود درمتن 0.05em باشد. (اگرارتفاع حرف M رابرابربا em1 درنظربگيريد 5% اين مقدار برابر با 0.05em خواهد بود).

حال براي اين که اين خصوصيات که در css نوشتيم برروي پاراگراف مدنظر اعمال شود کافيست که نام کلاس موجود در css رابه تگ مورد نظ مان درصفحه html نسبت دهيم:

 

<p class="fun">

A man walks into a bar; you would've thought he'd see it coming!

</p>

 

حال در نظربگيريد تگ  <blockquote>درون صفحه html تان وجود دارد و درون اين تگ ميخواهيد يک پاراگراف قرار دهيد که کلاس fun داشته باشد ، همانند کد زير:

 

<blockquote>

<p class="fun">

    Happiness is a dip in the ocean followed by a

    int or two of Old Speckled Hen. You can quote me on that!"

</p>

</blockquote>

 

به نظر شما اگر بخواهيد چند پاراگراف درون اين تگ قراردهيد چه کارميتوان کرد؟ ميتوان راه حل زير را اعمال کرد:

 

<blockquote>

<p class="fun">"Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that! </p>

<p class="fun">"Join us for a weekend away at some of our favorite dive spots and you'll soon be making new friends. </p>

<p class="fun">"Anyway, about time I got on with some <em>proper</em> work!" </p>

</blockquote>

 

اما همانطور که مي بينيد تکرار نام کلاس در تگها ي بالا زياد صورت گرفته ، پس به جاي استفاده از روش بالا ميتوان روش بهتري را به کار برد   :

 

<blockquote class="fun">

<p Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that! </p>

<p>"Join us for a weekend away at some of our favorite dive spots and you'll soon be making new friends. </p>

<p>"Anyway, about time I got on with some <em>proper</em> work!" </p>

</blockquote>

 

ID & CLASS

 

ياد گرفتيد که چگونه ميتوان از ID  و کلاس براي تگهاي موجود در HTML خود استفاده نماييد ، به عنوان مثال براي کلاس از نماد "." قبل از نام کلاس در نظر گرفته شده در فايل سي اس اس استفاده مي کنيم و براي ID از نماد "#" . 

نکته از مترجم : دقت نماييد براي استايل دهي هم از کلاس استفاه ميشود و هم از ID. اما تفاوت هايي هم در استفاده دارد وآن اينکه از ID  براي استايل دهي و مشخص کردن عناصر اصلي صفحه مانند هدر  فوتر و منو و غيره استفاده ميکنيم و يا براي استفاده در موارد برنامه نويسي .

تنها نکته در اين باره اين است که در يک صفحه HTML از نام يک ID  فقط مي شود يکبار استفاده نمود اما از نام يک کلاس مي توان به هر تعداد استفاده کرد.

 

در نظر بگيريد براي چند تگ درون صفحه تان از يک کلاس يکسان استفاده کرده ايد، مثلا:

 

.fun {

font-family: Georgia, Times, serif;

color: #339999;

letter-spacing: 0.05em;

}

 

اما براي يکي از تگ ها علاوه بر خصوصيات فوق يک يا چند خصيصه ديگر نيز اضافه کنيد، به اين روش اين کار را انجام مي دهيم:

 

blockquote.fun {

font-style: italic;

}

 

بدين ترتيب چنانچه کلاس fun درون تگ  blockquote قرار گيرد خصوصيت italic  را نيز مي خواند ، اما اگر به ساير تگ هايي که مي خواهيم تنها کلاس fun را بخوانند تگ blockquote را قرار ندهيم خصيصه italic  شدن فونت اعمال نمي شود.

 

براي روشن تر شدن اين موضوع مثال ديگري مي زنم:

فرض کنيد مي خواهيم تمامي متون قرار گرفته درون تگ  p صفحه مان به رنگ آبي نفتي درآيند بنابراين کافيست که در CSS بنويسيم : 

 

p {

color: navy;

}

 

اما حالا اگر بخواهيم يکي از متون قرار گرفته درون تگ p مان به رنگ ديگري درآيد کافيست ، به اين تگ p يه کلاس بدهيم و سپس به آن کلاس رنگ مورد نظرمان را نسبت دهيم:

 

.p.gre {

color: green;

}

 

استايل دهي قسمتي از متن با استفاده از span  :

 

فرض کنيد که چنين متني داريد:

 

<p>Bubble Underis a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the weather is good and the bacon rolls are flowing. We arrange weekends away as small groups to cut the costs ofaccommodation and travel and to ensure that everyone gets a trustworthy dive buddy.</p>

 

و مي خواهيد دو کلمه اول اين متن يعني Bubble Underis  به صورت bold  (پر رنگ) نمايش داده شود. براي اين کار براي اين کلمات يک تگ span به کار مي بريم و سپس به اين span استايل ديگري را اعمال مي کنيم و آن را آبي رنگ مي کنيم:

 

<p><span class=" blue ">Bubble Under</span> is a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the weather is good and the bacon rolls are flowing. We arrange weekends away as small groups to cut the costs ofaccommodation and travel and to ensure that everyone gets a trustworthy dive buddy.</p>

 

استايل دهي عناصر با استفاده از css 

 

 طي سالهاي گذشته توسعه دهندگان وب سايت با استفاده  از css تنها مي توانستند به متون موجود در سايت استايل بدهند و در پاره اي از مواقع رنگي را به متني اختصاص مي دادند، اين تنها کاري بود که مي شد با استفاده ازcss انجام داد چون در آن زمان مرورگر ها بسيار ضعيف بود و نمي توانستند خصوصيات بيشتري از css  را پشتيباني کنند. اما با گذشت زمان اين امر ميسر شد و مرورگر ها پيشرفت کردند.

 

 

 

 

براي اينکه بتوانيد يک فايل فلش را در صفحه وب خود وارد کنيد بايد قدم به قدم و مرحله به مرحله دستور العمل هاي زير را اجرا نماييد.

طراحی وب سایت

?- پوشه اي در آدرس ريشه سايت خود با نامي دلخواه ايجاد کنيد. اين پوشه چون بايد حاوي فايل هاي فلش باشد پس بهتر است نام آن پوشه را flash انتخاب کنيد تا فايل هاي سايت شما مرتب و سازماندهي شوند. ميتوانيد حتي اين پوشه را در کنار صفحه وب خود (لوکال) قرار دهيد و پس از گرفتن نتيجه درست آن را توسط FTP به هاست خود منتقل نماييد.

 

?- فايل فلش خود را در پوشه ايجاد شده قرار دهيد. نام فايل فلش را به ياد داشته باشيد تا در کد نويسي مجبور به ارجاع دوباره به فايل فلش نشويد در اين مثال ما نام فايل را flashhtml.swf قرار ميدهيم.نکته ديگر اينکه سعي کنيد تا حد امکان حجم فايل فلشي که در صفحه وب استفاده ميکنيد کم باشد تا در سرعت لود صفحه وب سايت شما تاثير کمتري داشته باشد. پيشنهاد ما براي اندازه فايل فلش عرض ??? پيکسل و ارتفاع ??? پيکسل است.

 

?- فايل html صفحه وب خود را باز کرده و مکاني را براي درج فايل فلش خود انتخاب نماييد.در صورت تمايل تگ DIV براي نگهداري اين ويديو در جاي مناسب خود ايجاد نماييد.

 

?- کدهاي زير را  در مکان انتخاب شده در صفحه وب خود قرار دهيد.

 

5- فايل خود را ذخيره کرده و اجرا نماييد تا نتيجه تمرين خود را مشاهده نماييد.

 

وارد کردن يک فايل صوتي در صفحه HTML

مواقعي لازم است تا يک فايل صوتي را در صفحه وب خود درج نماييد. به طوري کاربر بتواند به کليپ صوتي در صفحه وب شما گوش دهد.

 

 

طراحی وب سایت

 

در مثال بالا آدرس فايل صوتي توسط صفت SRC مشخص ميشود.

 

صفت HIDDEN اگر با مقدار true مقدار دهي شود شيء مورد نظر مخفي خواهد شد و کاربر نميتواند آن را مشاهده نمايد ولي کليپ صوتي پخش خواهد شد.

 

صفت autostart اگر مقدار true داشته باشد با لود شدن کامل صفحه کليپ صوتي شروع به پخش شدن ميکند.

 

صفت starttime نيز مکان شروع به پخش کليپ صوتي را تعيين ميکند . دراين مثال مقدار آن برابر ??:?? قرار داده شده است، اين بدين معني است که فايل صوتي از ثانيه ?? شروع به پخش ميکند.

 

مسلما صفت endtime  نيز مکان اتمام کليپ صوتي را تعيين ميکند. مقدار ??:?? در اين مثال بدين معني است که کليپ صوتي در ثانيه ?? ام به پايان برسد.

 

صفات ديگري نيز وجود دارد که در اين مثال استفاده نشده است. در زير اين صفات توضيح داده شده اند.

 

VOLUME = اين صفت ميزان صدا را تعيين ميکند.

LOOP=”true”|”false”  همانطور که مشاهده ميکنيد صفت loop با دو مقدار true و false تعيين ميشود. اگر مقدار آن true  تعيين شود با اتمام کليپ صوتي اشاره گر آن به  اول کليپ برگشته و دوباره شروع به پخش خواهد کرد. اين عمليات تا بستن صفحه وب ادامه ميابد.

PLAYCOUNT =  و اين صفت نيز تعداد دفعات پخش کليپ صوتي را تعيين ميکند. اگر مقدار اين صفت را برابر ? قرار دهيم با پخش ? دفعه کليپ صوتي عمليات پخش اتمام ميابد.

 

وارد کردن يک فايل ويديويي در HTML

براي وارد کردن يک ويدئو به صفحه وب خود راه هاي متعددي وجود دارند که هر کدام مزيت ها و مشکلاتي نسبت به يکديگر دارند.

 

به مثال زير دقت کنيد. براي نشان دادن يک کليپ ويدئويي در صفحه وب از تگ video استفاده شده است که اولين ايراد آن اين است که اين تگ در مرور گر هاي قديمي قابل به نمايش نيست.

 

انواع مختلف فايل هاي ويدئويي با فرمت هاي مختلف توسط تگ source شناسانده شده است تا در مواقعي که احيانا مرورگري از يک نوع فايل پشتيباني نکرد فايل هاي ديگري براي نمايش وجود داشته باشند.

 

<!DOCTYPE html>

<html>

<body>

 

<video width="320" height="240" controls autoplay>

<source src="movie.ogg" type="video/ogg">

<source src="movie.mp4" type="video/mp4">

<source src="movie.webm" type="video/webm">

<object data="movie.mp4" width="320" height="240">

<embed width="320" height="240" src="movie.swf">

</object>

</video>

 

</body>

</html>

روش ديگر براي نمايش يک کليپ ويدئويي اين است که از همان روشي که فايل هاي فلش را در صفحه وب نمايش ميدهيم نيز براي نمايش کليپ ويدئويي نيز استفاده کنيم. از معايب اين روش اين است که کليپ تصويري بايد به فايل فلش تبديل شود. ودومين عيب آن اين است که مرور گر هايي که فايل هاي فلش را پشتيباني نکنند نميتوانند کليپ تصويري شما را نمايش دهند.

 

در آموزش بعد به embedDeprecated tags ميپردازيم.